<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>内容1</div>
  <div>内容2</div>
  <div>内容3</div>
  <div>内容4</div>
  <div>内容5</div>

  <script src="./js/jquery-1.12.4.js"></script>
  <script>
    // 插件需要单独封装一个js 命名规范为 jquery.插件名.js  jquery.插件名.min.js  

    (function ($) {
      // 在这里生成一个默认配置对象
      var opts = {
        color: 'red',
        bgColor: 'blue'
      }

      // 如果这里的插件名设置为color 那么到时候调用就是$(dom).color()
      $.fn.color = function (params) {
        // color = color || 'red'
        // 将默认配置和用户传入的配置进行合并
        params = $.extend({}, opts, params)
       

        this.css({
          color: params.color,
          backgroundColor: params.bgColor
        })
        return this // 链式调用
      }
    }(jQuery))
  
  </script>
  <script>
    $(function () {
      $('div').color({
        color: '#fff',
        bgColor: '#aaa'
      })
    })
  
  </script>
</body>
</html>